<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1100" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
        <el-header>
			<div class="left-panel">
                <el-button type="warning"  @click="batch_export">导出</el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-date-picker v-model="search.business_date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					<el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
				</div>
			</div>
		</el-header>
		<el-main>
			<scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" height="550">
				<el-table-column width="1"></el-table-column>
				<el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
				<el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
				<el-table-column label="业务日期" prop="business_date" align="center"></el-table-column>
				<el-table-column label="单据编号" prop="purchase.code" align="center">
                    <template #default="scope">
                        <div v-if="scope.row.purchase_id != 0">
                            {{scope.row.purchase && scope.row.purchase.code}}
                        </div>
                        <div v-if="scope.row.purchase_id == 0">
                            {{scope.row.purchaseReturn && scope.row.purchaseReturn.return_code}}
                        </div>
                    </template>
                </el-table-column>
				<el-table-column label="业务类型" prop="type" align="center">
					<template #default="scope">
                        {{scope.row.type == 1?'采购入库':scope.row.type == 2?'采购退货' : scope.row.type == 10 ? '期初欠款' : '其他'}}
					</template>
				</el-table-column>
				<el-table-column label="期别" prop="money" align="center">
					<template #default="scope">
						<div v-for="item in stages_all" :key="item.stages_number">
							{{ scope.row.stages_number == item.stages_number ? item.type : '' }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="欠款总额" prop="money" align="center"></el-table-column>
				<el-table-column label="已付欠款" prop="pay_money" align="center"></el-table-column>
				<el-table-column label="应付欠款" prop="only_money" align="center"></el-table-column>
				<el-table-column label="备注" prop="remark" align="center"></el-table-column>
			</scTable>
		</el-main>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	props: {
		query: {type: Object, default: () => ({})},
	},
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增账户',
				edit: '欠款详情',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			apiObj: this.$API.finance.payable.detail,
			selection: [],
            search: {
                business_date: null
            },
			stages_all: [
				{stages_number: 0, type: '一次性',},
				{stages_number: 1, type: '首期金额',},
				{stages_number: 2, type: '二期金额',},
				{stages_number: 3, type: '三期金额',},
				{stages_number: 4, type: '四期金额',},
				{stages_number: 5, type: '五期金额',},
				{stages_number: 6, type: '六期金额',},
				{stages_number: 7, type: '七期金额',},
				{stages_number: 8, type: '八期金额',},
				{stages_number: 9, type: '九期金额',},
				{stages_number: 10, type: '十期金额',},
				{stages_number: 11, type: '十一期金额',},
				{stages_number: 12, type: '十二期金额',},
			],
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		submit() {
			this.$emit('success', this.selection)
			this.visible = false
		},
		selectionChange(selection) {
			this.selection = selection;
		},
        upsearch() {
			this.$refs.table.upData(this.search)
		},
		refresh() {
			for (const key in this.search) {
				this.search[key] = null;
			}
			this.$refs.table.upData(this.search)
		},
        /**导出*/
		async batch_export() {
            let query = {
                business_date: this.search.business_date,
                supplier_id: this.query.supplier_id,
                scene: 1
            }
			var res = await this.$API.finance.payable.export.get(query);
			if (res.code == 1) {
				this.$message.success("导出成功");
				window.location.href = res.data.url
			} else {
				this.$alert(res.message, "提示", {type: "error"});
			}
		},
	}
}
</script>

<style></style>
